<template>
  <el-form
    ref="formRef"
    :model="dynamicValidateForm"
    label-width="auto"
    class="demo-dynamic"
  >

    <el-form-item
      prop="unitCode"
      label="工装选择"
      :rules="[
        {
          required: true,
          message: '请选择工装',
          trigger: 'blur',
        }
      ]"
    >
      <el-select
        v-model="dynamicValidateForm.unitCode"
        filterable
        placeholder="请选择工装型号"
        style="width: 240px"
      >
        <el-option
          v-for="item in unitoptions"
          :key="item.code"
          :label="`${item.drawingNo} ${item.name}`"
          :value="item.code"
        />
      </el-select>
    </el-form-item>

    <div v-for="(usage,index) in dynamicValidateForm.use" :key="index" class="inline-content" >
      <el-form-item label="工序选择" 
        :prop="`use[${index}].step`"
        :rules="[
        {
          required: true,
          message: '请选择工序',
          trigger: ['change','blur'],
        }
      ]">
        <el-cascader v-model="usage.step" 
          :options="rawOptions" style="width:300px"/>
      </el-form-item>
      <el-form-item label="用途描述"
        :prop= "`use[${index}].description`"
        :rules="[
          {
            required: true,
            message: '请输入工装用途',
            trigger: ['change','blur'],
          }
        ]">
        <el-input v-model="usage.description" style="width: 400px;" />
      </el-form-item>
      <el-form-item >
        <el-button type="info" @click="deleteItem(index)">删除</el-button>
      </el-form-item>
    </div>

  
    <el-form-item>
      <el-button type="primary" @click="submitForm(formRef)">Submit</el-button>
      <el-button @click="addunit">New unit</el-button>
      <el-button @click="resetForm(formRef)">Reset</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'

import type {  FormInstance } from 'element-plus'

// 1. 给useFetch设置默认值，避免初始为undefined
const { data: unitoptions = [] } = await useFetch('/api/hejia', { method: 'get' })
const { data: rawOptions  = [] } = await useFetch('/api/usage/cascadeTable', { method: 'get' })


const formRef = ref<FormInstance>()
const dynamicValidateForm = reactive<{
  use: usageItem[]
  unitCode: string
}>({
  use: [{
    step:[],
    description: ''
  }],
  unitCode: '',
})

interface usageItem {
  step:string[]
  description: string
}

const deleteItem = (index: number) => {
  dynamicValidateForm.use.splice(index, 1)
}

const addunit = () => {
  dynamicValidateForm.use.push({ step: [], description: '' })
}

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate(async(valid) => {
    if (valid) {
      await $fetch('/api/usage',{
        method:'post',
        body:dynamicValidateForm
      })
      emit('submit')
      // console.log(dynamicValidateForm)
    } else {
      console.log('error submit!')
    }
  })
}

const emit = defineEmits(['submit'])

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

</script>

<style lang="css" scoped>
/* 关键样式：让内容横向排列 */
.inline-content {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
  gap: 10px; /* 元素之间的间距 */
  width: 100%; /* 占满表单项宽度 */
}
</style>